<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="${#request.getContextPath()} + '/'">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商品上传</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="panel panel-default" >
    <div class="panel-heading">新增商品（温馨提示：商品添加/修改成功后，需要管理员审核通过后才能发布到会员推广商品列表）</div>
    <div class="panel-body">
        <div class="table-responsive">

                <!--<table class="table table-bordered table-striped">
                    <colgroup>
                        <col class="col-xs-1">
                        <col class="col-xs-7">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>Class</th>
                        <th>描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">
                            <code>商品名称</code>
                        </th>
                        <td><input type="text" name="goods_name"></td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <code>商品图片</code>
                        </th>
                        <td>
                            <div class="col-xs-6 col-md-3">
                                <a href="#" class="thumbnail">
                                    <img id="image_slt" src="images/default.png" alt="上传图片预览">
                                </a>
                            </div>
                            <input type="file" name="file" onchange="upload()"></td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <code>.info</code>
                        </th>
                        <td>标识普通的提示信息或动作</td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <code>.warning</code>
                        </th>
                        <td>标识警告或需要用户注意</td>
                    </tr>
                    <tr>
                        <th scope="row">
                            <code>.danger</code>
                        </th>
                        <td>标识危险或潜在的带来负面影响的动作</td>
                    </tr>
                    </tbody>
                </table>-->

                <table class="table table-bordered table-striped">
                    <tbody><tr>
                        <td align="right">
                            <span class="red">*</span><strong>商品名称：</strong>
                        </td>
                        <td>
                            <input type="text" id="good_name" name="goodName" value="">
                        </td>

                    </tr>

                    <tr>
                        <td align="right"><span class="red">*</span><strong>商品类型：</strong></td>
                        <td>
                            <select name="typeId" id="type_id" style="width:252px;font-size:14px" class="selectBox">
                                <option value="">请选择...</option>

                                <option th:value="${type.type_Id}" th:each="type : ${goodtypes}" th:text="${type.type_Name}">保健品</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right"><span class="red">*</span><strong>排序编号：</strong></td>
                        <td>
                            <input type="text" id="order_no" name="orderNo" onkeyup="checkVal2(this);" value="">
                        </td>
                    </tr>
                    <tr>
                        <td align="right"><span class="red">*</span><strong>购买作弊值：</strong></td>
                        <td>
                            <input type="text" id="sell_num" name="sellNum" onkeyup="checkVal2(this);" value="">
                        </td>
                    </tr>

                    <tr>
                        <td align="right"><span class="red">*</span><strong>上传图片：</strong></td>
                        <td>

                            <div class="col-xs-6 col-md-3">
                                <a href="#" class="thumbnail">
                                    <img id="image_slt1" src="images/default.png" alt="上传图片预览">
                                </a>
                            </div>
                            <form id="form1" enctype="multipart/form-data">
                            <input type="file" name="file" onchange="upload('image_slt1','form1')">
                            </form>
                        </td>
                    </tr>

                    <tr>
                        <td align="right"><strong>图片2预览：</strong></td>
                        <td>
                            <div id="sm_div1">

                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img id="image_slt2" src="images/default.png" alt="上传图片预览">
                                    </a>
                                </div>
                                <form id="form2" enctype="multipart/form-data">
                                    <input type="file" name="file" onchange="upload('image_slt2','form2')">
                                </form>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td align="right"><strong>图片3预览：</strong></td>
                        <td>
                            <div id="sm_div2">

                                <div class="col-xs-6 col-md-3">
                                    <a href="#" class="thumbnail">
                                        <img id="image_slt3" src="images/default.png" alt="上传图片预览">
                                    </a>
                                </div>
                                <form id="form3" enctype="multipart/form-data">
                                    <input type="file" name="file" onchange="upload('image_slt3','form3')">
                                </form>

                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td align="right"><span class="red">*</span><strong>推广说明：</strong></td>
                        <td>
                            <textarea id="promote_desc" name="promoteDesc" style="width:540px; height: 160px;"></textarea>
                        </td>
                    </tr>

                    <tr>
                        <td align="right"><span class="red">*</span><strong>商品套餐：</strong></td>
                        <td>
                            <table id="tcbg" class="table table-bordered table-striped">
                                <tbody><tr>
                                    <th align="left" style="background-color:#F9F9F9">(<font color="red">*</font>)描述</th>
                                    <th align="left" style="background-color:#F9F9F9">(<font color="red">*</font>)成本</th>
                                    <th align="left" style="background-color:#F9F9F9">(<font color="red">*</font>)价格</th>
                                    <th align="left" style="background-color:#F9F9F9">(<font color="red">*</font>)分成</th>
                                    <th align="left" style="background-color:#F9F9F9">(<font color="red">*</font>)客服提成</th>
                                </tr>



                                </tbody></table>


                            <div style="margin-top:10px">
                                <button class="btn btn-sm btn-primary" onclick="addRow('tcbg')">
                                    <i class="icon-save"></i>
                                    增加
                                </button>
                                <!--<button class="btn btn-sm btn-danger" onclick="del_row($VD('tcbg'));return false;">
                                    <i class="icon-trash"></i>
                                    删除
                              </button>-->
                                (<font color="red">提示信息：</font>上述所有输入项均为必填项目，请务必填入相应值后保存！)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td align="right"><span class="red">*</span><strong>商品标签：</strong></td>
                        <td>




                            <label>
                                <input type="checkbox" class="ace" id="1" name="tags" value="1">
                                <span class="lbl">
								             <span class="label label-danger">热销爆款</span>
								          </span>
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" class="ace" id="2" name="tags" value="2">
                                <span class="lbl">
								             <span class="label label-pink">女粉推荐</span>
								          </span>
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" class="ace" id="3" name="tags" value="3">
                                <span class="lbl">
								             <span class="label label-primary">男粉推荐</span>
										  </span>
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" class="ace" id="4" name="tags" value="4">
                                <span class="lbl">
								             <span class="label label-success">人气新品</span>
								          </span>
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="checkbox" class="ace" id="5" name="tags" value="5">
                                <span class="lbl">
								             <span class="label label-info">男女通用</span>
								          </span>
                            </label>


                        </td>
                    </tr>
                    <tr>
                        <td align="right"><span class="red">*</span><strong>微信文案：</strong></td>
                        <td>


                            <input type="checkbox" class="ace" id="copy_1887427" name="gcopy" value="1887427">
                            <span class="lbl">&nbsp;<a href="http://localhost:8081/cust/goods/add#">11</a></span><br>



                        </td>
                    </tr>

                    <tr>
                        <td align="right"><strong>站内文案：</strong></td>
                        <td>


                        </td>
                    </tr>

                    <tr>
                        <td align="right"><strong>空间文案：</strong></td>
                        <td>


                            <input type="checkbox" class="ace" id="copy_39201701" name="zcopy_id" value="39201701">
                            <span class="lbl">&nbsp;<a href="http://localhost:8081/cust/goods/add#">12</a></span><br>



                        </td>
                    </tr>

                    <tr>
                        <td align="right"><strong>跳转说明：</strong></td>
                        <td>
                            <textarea id="copy_desc" name="copyDesc" style="width:540px; height:80px;"></textarea>
                        </td>
                    </tr>

                    <tr>
                        <td align="right"><strong>跳转地址：</strong></td>
                        <td>
                            <input type="text" id="forward_link" name="forwardLink" style="width:540px;" value="">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center">
							             <span id="submit" onclick="submitData();" class="btn btn-lxg btn-primary">
							               <i class="icon-save bigger-120"></i>
							                保存
							             </span>
                            <span id="back" onclick="" class="btn btn-lxg btn-undo">
							             <i class="icon-undo bigger-120"></i>
							                返回 </span>
                        </td>
                    </tr>
                    </tbody></table>

        </div>

    </div>
</div>



<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script>
    function upload(imgId,ids) {
        var idw = "#"+ids;
        //获取Form表单对象
        var formTag = $(idw)[0];
        //获取表单中的数据
        //formdata封装了表单中的所有数据
        var formData = new FormData(formTag);

        //上传图片需要重写ajax部分属性
        $.ajax({
            url:"product/upload",
            type:"post",
            data:formData,
            contentType:false,
            processData:false,
            success:function (data) {
                if (data.resultCode==0) {
                    var id = "#"+imgId;
                    $(id).attr("src",data.resultData);
                } else {
                    alert("上传失败");
                }
            }
        });

    }

    function submitData() {

        //定义一个json对象，需要作为ajax的post方法参数进行提交到后台
        var goodsJson={};

        var goodsName = $("#good_name").val();
        if (goodsName == null || goodsName == "") {
            alert("请填写商品名称");
        }

        var image1URL = $("#image_slt1").attr("src");
        var image2URL = $("#image_slt2").attr("src");
        var image3URL = $("#image_slt3").attr("src");

        if (image1URL == null || image1URL == "images/default.png") {
            alert("请上传图片1");
        }
        if (image2URL == null || image2URL == "images/default.png") {
            alert("请上传图片2");
        }
        if (image3URL == null || image3URL == "images/default.png") {
            alert("请上传图片3");
        }

        goodsJson['good_Name']=goodsName;
        goodsJson['good_Pic']=image1URL;
        goodsJson['good_Pic1']=image2URL;
        goodsJson['good_Pic2']=image3URL;

        //商品套餐数组
        var skuArray=[];

        //获取商品套餐
        //获取名称为sku的tr标签,是一个数组，之后对这个数组进行遍历
        $("tr[name='sku']").each(function () {
            //定一个sku（商品套餐）的json对象
            var sku={};
            //获取所有的input标签，也是一数组
            $(this).find("input").each(function () {
                //this表示的就是input
                sku[this.name]=this.value;

            });
            skuArray.push(sku);
        });

        goodsJson['listsku']=skuArray;


//        $.post("product/saveGoods",{good_Name:goodsName,good_Pic:image1URL,good_Pic1:image2URL,good_Pic2:image3URL},function (data) {
//            if (data.resultCode == 0) {
//                alert("新增成功!");
//            }else
//            {
//                alert("新增失败，原因error");
//            }
//        })

        //因为后台需要接受的数据格式是json格式。所以需要如下写ajax。不能直接使用$.post
        //注意：后台controller需要在参数中加入一个注解@RequestBody
        $.ajax({
            url:"product/saveGoods",
            type:"post",
            data:JSON.stringify(goodsJson),
            contentType:"application/json;charset=utf-8",
            success:function (data) {
                if (data.resultCode==0) {
                    //content这个id在当前页面不存在，但是此页面会被嵌入到index页面中，就可以获取id为content标签
                    $("#content").load("product/goodlist");
                } else {
                    alert("新增失败")
                }
            }

        });




    }

    /*参数id是表格的ID*/
    function addRow(id) {
        var tag = "<tr name='sku'>\n" +
            "    <td align=\"left\" style=\"background-color:#F9F9F9\"><input type=\"text\" name=\"sku_Name\"></td>\n" +
            "    <td align=\"left\" style=\"background-color:#F9F9F9\"><input type=\"text\" name=\"sku_Cost\"></td>\n" +
            "    <td align=\"left\" style=\"background-color:#F9F9F9\"><input type=\"text\" name=\"sku_Price\"></td>\n" +
            "    <td align=\"left\" style=\"background-color:#F9F9F9\"><input type=\"text\" name=\"sku_Pmoney\"></td>\n" +
            "    <td align=\"left\" style=\"background-color:#F9F9F9\"><input type=\"text\" name=\"service_Money\"></td>\n" +
            "</tr>";
        $("#"+id).append(tag);
    }
</script>
</body>
</html>